<template>
    <div class="control">
        <!-- 搜索 -->
        <el-form ref="searchForm" :model="searchMap">
            <Breadcrumb :title="pageTitle" />
            <div class="search_wrapper flex-space-between el-form--inline" style="margin-top: 20px;">
                <div class="search flex">
                    <el-form-item prop="planName" size="small">
                        <span class="label-tip" style="width: 160px;">单位名称：</span>
                        <el-input v-model="searchMap.planName" placeholder="单位名称"></el-input>
                    </el-form-item>
                </div>
                <div class="edit">
                    <el-form-item class="flex">
                        <el-button @click="handleSearch()" class="btn_primary el-icon-search">查询</el-button>
                        <el-button @click="handleReset()" class="btn_cancel el-icon-refresh-left">重置</el-button>
                        <!-- <el-button @click="handleAdd()" class="btn_primary el-icon-plus">新增</el-button> -->
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <!-- 表格 -->
        <el-table :data="dataList" v-loading="loading" stripe class="per_table" style="width: 100%" :height="winTableH">
            <el-table-column prop="planName" label="单位名称"></el-table-column>
            <el-table-column prop="planStartTime" label="检查类型" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="问题隐患" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="整改措施" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="整改进度" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="隐患级别" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="整改时间" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="是否销号" align="center"></el-table-column>
            <el-table-column prop="planEndTime" label="自查情况" align="center"></el-table-column>
            <!-- <el-table-column label="操作" width="280">
                <template slot-scope="scope">
                    <div>
                        <span type="text" class="marginl-10 el-icon-zoom-in" style="color:dodgerblue;" size="small"
                            @click="handleSelect(scope.row)">查看</span>
                        <span type="text" class="el-icon-edit" style="color:dodgerblue;" size="small"
                            @click="handleEdit(scope.row)">编辑</span>
                        <span type="text" class="marginl-10 el-icon-delete" style="color:red;" size="small"
                            @click="handleDelete(scope.row)">删除</span>
                    </div>
                </template>
            </el-table-column> -->
        </el-table>

        <!-- 分页 -->
        <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
            @change="getList"></Pagination>


        <!-- 弹窗 详情 -->
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body
            :before-close="() => { dialogVisible = false }" :close-on-click-modal="false">
            <div class="content">
                <el-form ref="form" :model="formModel" size="small" :rules="formRules" label-width="80px" :disabled="title === '风险识别计划详情'">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="计划名称" label-width="120px" prop="planName">
                                <el-input v-model="formModel.planName" placeholder="请输入计划名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="计划开始时间" label-width="120px" prop="planStartTime">
                                <el-date-picker v-model="formModel.planStartTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请输入计划开始时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="计划结束时间" label-width="120px" prop="planEndTime">
                                <el-date-picker v-model="formModel.planEndTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请输入计划结束时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="备注" label-width="120px">
                                <el-input v-model="formModel.remark" type="textarea" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" v-show="title==='风险识别计划详情'">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">关 闭</el-button>
            </div>
            <div slot="footer" class="dialog-footer" v-show="title!=='风险识别计划详情'">
                <el-button @click="() => { dialogVisible = false }" class="btn_cancel">取 消</el-button>
                <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { riskIdentifyPlan, riskIdentifyPlanList, riskIdentifyPlanInfo } from '../api/index'
import { listUser, deptTreeSelect } from '@/api'

export default {
    dicts: ['control_hierarchy'],
    data() {
        return {
            pageTitle:'安全检查',
            loading: true,
            total: 0,
            title: '风险识别计划详情',
            dialogVisible: false,
            deptOptions: undefined,
            userOptions: [],
            searchMap: {
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [],
            // 提交表单数据
            formModel: {},
            reqType: 'post',
            formRules: {
                planName: {
                    required: true,
                    message: "计划名称不能为空",
                    trigger: "change",
                },
                planStartTime: {
                    required: true,
                    message: "计划开始时间不能为空",
                    trigger: "change",
                },
                planEndTime: {
                    required: true,
                    message: "计划结束时间不能为空",
                    trigger: "change",
                },
            },
        }
    },
    methods: {
        submitFrom() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    riskIdentifyPlan(this.formModel, this.reqType).then(res => {
                        if (200 === res.code) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                            });
                            this.dialogVisible = false
                            this.formModel = {}
                            this.getList()
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        //删除
        handleDelete(row) {
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                riskIdentifyPlan([row.riskIdentifyPlanId], 'delete').then(res => {
                    if (200 === res.code) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList()
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 查询
        handleSearch() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.searchMap = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        //新增打开
        handleAdd() {
            this.title = "新增风险识别计划"
            this.reqType = 'post'
            if(this.$refs.form){
                this.$refs.form.resetFields()
            }
            this.formModel = {}
            this.dialogVisible = true;
        },
        //编辑
        handleEdit(row) {
            this.title = "编辑风险识别计划"
            this.formModel = row
            this.reqType = 'put'
            this.dialogVisible = true;
        },
        //查看
        handleSelect(row) {
            this.title = "风险识别计划详情"
            this.reqType = 'select'
            riskIdentifyPlanInfo(row.riskIdentifyPlanId).then(res => {
                this.formModel = res.data
                this.dialogVisible = true;
            });
        },
        // 页面数据
        async getList() {
            const { code, rows, total } = await riskIdentifyPlanList(this.searchMap)
            if (code === 200) {
                this.loading = false
                this.dataList = rows
                this.total = total
            }
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 用户列表
        initUserList() {
            listUser().then(res => {
                const resp = res
                this.userOptions = resp.rows
            })
        }
    },
    mounted() {
        this.getList()
        this.getDeptTree()
        this.initUserList()
    },
}
</script>
<style lang="less">
.control {
    .el-table__cell {
        .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>